<template>
  <div v-if="visible" class="toast-container">
    <div 
      class="toast" 
      :class="[`toast-${type}`]"
    >
      <div class="toast-icon" v-if="showIcon">
        <svg v-if="type === 'success'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.6 6.4L7.3 10.7C7.1 10.9 6.9 11 6.7 11C6.5 11 6.3 10.9 6.1 10.7L4.4 9C4 8.6 4 8 4.4 7.6C4.8 7.2 5.4 7.2 5.8 7.6L6.7 8.5L10.2 5C10.6 4.6 11.2 4.6 11.6 5C12 5.4 12 6 11.6 6.4Z" fill="currentColor"/>
        </svg>
        <svg v-else-if="type === 'error'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 12C7.4 12 7 11.6 7 11C7 10.4 7.4 10 8 10C8.6 10 9 10.4 9 11C9 11.6 8.6 12 8 12ZM9 9H7V4H9V9Z" fill="currentColor"/>
        </svg>
        <svg v-else-if="type === 'warning'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.5 12.7L9.3 1.5C8.9 0.8 8 0.8 7.6 1.5L1.4 12.7C1 13.3 1.4 14.1 2.2 14.1H14.8C15.5 14.1 16 13.3 15.5 12.7ZM7.3 5.7C7.3 5.3 7.6 5 8 5C8.4 5 8.7 5.3 8.7 5.7V9.2C8.7 9.6 8.4 9.9 8 9.9C7.6 9.9 7.3 9.6 7.3 9.2V5.7ZM8 12.4C7.4 12.4 7 12 7 11.4C7 10.8 7.4 10.4 8 10.4C8.6 10.4 9 10.8 9 11.4C9 12 8.6 12.4 8 12.4Z" fill="currentColor"/>
        </svg>
        <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 12C7.4 12 7 11.6 7 11C7 10.4 7.4 10 8 10C8.6 10 9 10.4 9 11C9 11.6 8.6 12 8 12ZM9 9H7V4H9V9Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="toast-content">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'info',
      validator: (value) => {
        return ['info', 'success', 'warning', 'error'].includes(value)
      }
    },
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 3000
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    visible(val) {
      if (val && this.duration > 0) {
        this.startTimer()
      }
    }
  },
  mounted() {
    if (this.visible && this.duration > 0) {
      this.startTimer()
    }
  },
  beforeUnmount() {
    this.clearTimer()
  },
  methods: {
    startTimer() {
      this.clearTimer()
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          this.$emit('update:visible', false)
        }, this.duration)
      }
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    }
  }
}
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
}

.toast {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  min-width: 280px;
  max-width: 80vw;
  animation: toastFadeIn 0.3s;
}

.toast-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.toast-content {
  font-size: 14px;
  word-break: break-word;
}

.toast-info {
  color: #1890ff;
}

.toast-info .toast-icon {
  color: #1890ff;
}

.toast-success {
  color: #52c41a;
}

.toast-success .toast-icon {
  color: #52c41a;
}

.toast-warning {
  color: #faad14;
}

.toast-warning .toast-icon {
  color: #faad14;
}

.toast-error {
  color: #f5222d;
}

.toast-error .toast-icon {
  color: #f5222d;
}

@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 